<template lang="pug">
a-form.w-full.search-bar(v-bind="formAttrs" ref="form")
  a-row(:gutter="row.gutter || 25" v-bind="row")
    slot
</template>
<script lang="ts" setup>
defineProps({
  /**
   * row 属性 （同 [a-row](https://www.antdv.com/components/grid-cn#Row) 组件属性）
   */
  row: { type: Object, default: () => ({}) },
})

defineOptions({ name: 'SearchBar' })

const attrs = useAttrs()

const defaultFormAttrs = {
  labelAlign: 'left',
  layout: 'inline',
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
}
const formAttrs = reactive({
  ...defaultFormAttrs,
  ...attrs,
})
const form = ref()
</script>
<style lang="less">
.search-bar.ant-form-inline {
  overflow: hidden;

  > .ant-row {
    flex-grow: 1;
  }
  .ant-form-item > .ant-form-item-label {
    flex: auto;
  }
}
</style>
